<template>
  <div class="box">
      <div class="head">
        <search />
      </div>
      <div class="content">
        <!-- 商品分类 -->
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item, index) of categoryList" :key="index" :title="item" @click="cateClick"/>
        </van-sidebar>
        <div class="show">
          <div v-for="(item, index) of showList" :key="index" @click="brandClick(index)">
            <img src="https://img10.360buyimg.com/focus/s140x140_jfs/t13252/193/948884668/3832/2cd704d4/5a17b918N0785e503.jpg" >
            <p>{{ item.brand }}</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, icon, Col, Row, Sidebar, SidebarItem } from 'vant'
import search from '../../components/search'
import { categorylist, categorybrandlist } from './../../api/list'

Vue.use(Col)
Vue.use(Row)
Vue.use(icon)
Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
export default {
  data () {
    return {
      activeKey: 0,
      categoryList: [],
      showList: [],
      category: '手机'
    }
  },
  components: {
    search
  },
  async mounted () {
    this.categoryList = await categorylist()
    this.showList = await categorybrandlist({ category: this.categoryList[0] })
  },
  methods: {
    async cateClick (index) {
      this.category = this.categoryList[index]
      this.showList = await categorybrandlist({ category: this.categoryList[index] })
    },
    brandClick (index) {
      this.$router.push({ path: '/list', query: { brand: this.showList[index].brand, category: this.category, bool: true } })
    }
  }
}
</script>

<style lang='stylus' scoped>
html
  font-size 20px
.show
  background-color #eee
  position absolute
  left 80px
  top 54px
  width calc(100% - 80px)
  height calc(100% - 114px)
  display flex
  justify-content space-around
  align-content flex-start
  flex-wrap wrap
  div
    background-color white
    width 40%
    height 6rem
    text-align center
    margin .5rem 0
    border-radius .5rem
    font-size 12px
    img
      width 4.5rem
</style>
